<script setup lang="js">
// 引入naive-ui
import {NGrid, NGridItem, NCard, NScrollbar, NImage} from "naive-ui";

// 路由实例
const route = useRoute();

// 获取路由参数
const pageKey = computed(() => route.fullPath);

// 结构参数
const {book_id, id} = route.params;

// 选中ID
const activeId = ref(id);

// 调用接口
const {data, error, pending} = await useBookMenusApi(book_id);

// 跳转
const open = (d) => {
  activeId.value = d;
  navigateTo({
    params: {
      ...route.params,
      id: d
    }
  })
}

// 中间件
definePageMeta({
  // 将中间件定义为函数
  middleware: [
    function (to, from) {
      if (isNaN(+to.params.id)) {
        return abortNavigation("页面不存在")
      }
      return true;
    }
  ],
})
</script>

<template>
  <LoadingGroup :pending="pending" :error="error">
    <n-grid :x-gap="20">
      <n-grid-item :span="6">
        <n-scrollbar style="height: 450px;" class="bg-white rounded shadow mb-5">
          <div class="flex flex-col items-center justify-center">
            <n-image :src="data.detail.cover" width="60px" height="80px" class="rounded shadow my-4"/>
            <span class="text-sm">{{ data.detail.title }}</span>
          </div>

          <DetailMenu>
            <DetailMenuItem v-for="(item,index) in data.menus" :key="index" :item="item" :index="index"
                            @click="open(item.id)" :active="Number(item.id) === Number(activeId)"/>

            <Empty v-if="data.menus.length === 0" desc="暂无目录"/>
          </DetailMenu>
        </n-scrollbar>
      </n-grid-item>
      <n-grid-item :span="18">
        <n-card>
          <NuxtPage :page-key="pageKey"/>
        </n-card>
      </n-grid-item>
    </n-grid>
  </LoadingGroup>
</template>

<style scoped>

</style>